<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">
	<ui:define name="head">
		<title>变压器特性分析</title>
		<link rel="stylesheet"
			href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link
			href='#{request.contextPath}/resources/bootstrap/css/bootstrap-datetimepicker.min.css'
			rel='stylesheet' />
		<style>
a:visited,a:hover {
	color: red;
}

iframe {
	height: 600px;
}

.box-footer {
	border-top: none;
}

.ui-widget-header .ui-inputfield,.ui-widget-content .ui-inputfield {
	width: 120px;
}
.tdanger{
	background-color:#d73925 !important;
	color:white;
}
.twarning{
	background-color:#f39c12 !important;
	color:white;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="row">
			<div class="col-md-3 full-content" style="padding-right: 10px;">
				<div class="box box-success">
					<div class="box-header with-border">
						<h3 class="box-title">变压器冲击列表</h3>
					</div>
					<div class="box-body full-content-scroll with-border">
						<h:form id="form">
							<p:toolbar>
								<f:facet name="left">
									<p:calendar id="datetime" navigator="true"
										pattern="yyyy-MM-dd" placeholder="起始日期"
										value="#{transformerFaultController.startDate}"
										styleClass="calendar-width" />
									<p:outputLabel for="popup4" value="至 "
										style="margin-right:5px;margin-left:5px;" />
									<p:calendar id="popup4" navigator="true" pattern="yyyy-MM-dd"
										styleClass="calendar-width" placeholder="终止日期"
										value="#{transformerFaultController.endDate}">
									</p:calendar>
									<p:commandButton icon="ui-icon-search"
										actionListener="#{transformerFaultController.query}"
										update="leftTree" oncomplete="hideWaveView();" style="margin-left:5px;">
									</p:commandButton>
									<p:commandButton title="手动更新" icon="fa fa-refresh" style="margin-left:0px;"
									actionListener="#{transformerFaultController.manualUpdate}" update="leftTree"/>
								</f:facet>
							</p:toolbar>
							<p:tree id="leftTree" value="#{transformerFaultController.root}"
								style="width:400px;border:none" selectionMode="single"
								var="node" dynamic="true" widgetVar="leftTree"
								animate="true">
								<p:ajax event="expand" update="leftTree"  process="@this"
									listener="#{transformerFaultController.onNodeExpand}" />
								<p:ajax event="select" process="@this"
									update="form:currentChartJson form:currentNodeType form2"
									listener="#{transformerFaultController.onNodeSelect}"
									oncomplete="initWaveView()" />
								<p:treeNode type="station" icon="fa fa-home">
									<h:outputText value="#{node.stationName}">
									</h:outputText>
								</p:treeNode>
								<p:treeNode type="transformer">
									<h:outputText value="#{node.transformName}">
									</h:outputText>
								</p:treeNode>
								<p:treeNode type="time">
									<h:outputText value="#{node.faultTime}">
									</h:outputText>
								</p:treeNode>
							</p:tree>
							<h:inputHidden id="currentChartJson" value="#{transformerFaultController.currentChartJson}"/>
							<h:inputHidden id="currentNodeType" value="#{transformerFaultController.currentNodeType}"/>
						</h:form>
					</div>
				</div>
			</div>
			<div class="col-sm-9 full-content" style="padding-left: 10px;">
				<h:form id="form2">
					<div class="box box-success">
						<div class="box-header with-border">
							<span class="box-title" id="rightTitle"></span>
							<div id="selectRatiosDiv" style="display:none;" class="input-group pull-right">
								<span>中压侧分接头：</span> <select
									id="selectRatios" onchange="changeTapRatio();"
									style="width: 100px;" />
							</div>
						</div>
						<div id="rightBody" style="display:none;" class="box-body">
							<div class="box box-default">
								<div class="box-header">
									<h3 class="box-title">故障前后电抗相差百分比</h3>
								</div>
								<div class="box-body">
									<div class="col-sm-12" style="text-align:right;">
										<div type="button btn-xs" style="margin:5px;" class="btn btn-danger" />
										严重告警
										<div type="button btn-xs" style="margin:5px;" class="btn btn-warning" />
										告警
									</div>
									<div class="chart tab-pane active" id="detailTableDiv"
										style="position: relative">
										<div style="width: 100%;">
											<table id="detailTable" class="table"></table>
										</div>
									</div>
								</div>
							</div>
							<div class="box box-default">
								<div class="box-header">
									<h3 class="box-title">故障前后电抗曲线变换</h3>
								</div>
								<div class="box-body">
									<div class="chart tab-pane" id="detailChartDiv"
										style="position: relative">
										<div style="width: 100%;">
											<div id="detailChart" style="height: 300px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</h:form>
			</div>
			<div class="box-footer"></div>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/pinyin/pinyinUtil.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script src="/resources/plugins/echarts/echarts.min.v3.7.2.js"></script>
		<script src="/resources/js/mycharts/categoryLineChart.js"></script>
		<script src="/resources/js/array-util.js"></script>
		<script src="byqsa.js"></script>
	</ui:define>
</ui:composition>
